<!DOCTYPE html>
<html>
    <head>
        <!-- 当前文档的字符集编码为utf-8 -->
        <meta charset="utf-8">
        <meta name="author" content="disenQF" >
        <meta name="keywords" content="CGI开发 H5模板 千锋教育 西安物联网">
        <title>HTML5模板-DOM对象的管理</title>
        <!-- 引入外联样式文件 -->
        <link rel="stylesheet" href="/css/my.css">
        <style>
          span {
            display: inline-block;
            padding: 20px;
            margin: 10px;
            background-color: lightgrey;
          }
        </style>
    </head>
    <body>
       <button onclick="add()">新增</button>
       <button onclick="dellast()">删除最后一个元素</button>
       <div id="d1"></div>

       <script>
          function add(){
              let n = parseInt(Math.random()*10+1);
              // 创建新的span标签对象
              let span = document.createElement("span");
              span.innerText = n;

              // 将新的span标签对象添加到 id为d1的div中
              d1.append(span);
          }
          function dellast(){
              let spans = d1.getElementsByTagName("span");
              d1.removeChild(spans[spans.length-1]);
          }
       </script>
    </body>
</html>
